<template>
    <a-modal title="运营流程" :visible="visible" :width="1200" @cancel="closeModal" :zIndex="999">
        <template slot="footer">
            <a-button key="submit" type="primary" @click="handleExportXls">
                导出
            </a-button>
            <a-button key="submit" type="primary" @click="handleOk">
                关闭
            </a-button>
        </template>
        <a-table :columns="columns" :loading="loading" :data-source="tableData" bordered size="middle" :pagination="false"
            :scroll="{ y: 500 }">
            <template slot='processName' slot-scope="text, record">
                <a @click="processTask(record)">{{ text }}</a>
            </template>
            <template slot='finishedProcessTime' slot-scope="text, record">
                <span>{{ formatTime(text) }}</span>
            </template>
            <template slot='overTime' slot-scope="text, record">
                <span>{{ formatTime(text) }}</span>
            </template>
        </a-table>
    </a-modal>
</template>
<script>
import { getAction } from '@/api/manage';
import moment from 'dayjs'
import { BoardMixin } from './boardMixin'
import { downFile } from '@/api/manage'
export default {
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        modalType: {
            type: Object,
            default: () => { }
        },
        // 时间
        time: {
            type: Array,
            default: () => []
        },
    },
    mixins: [BoardMixin],
    data() {
        return {
            columns: [
                {
                    title: '',
                    children: [
                        {
                            title: '排名',
                            align: 'center',
                            customRender: (text, row, index) => {
                                return <span>{index + 1}</span>

                            }
                        },
                        {
                            title: '模块',
                            dataIndex: 'processType_dictText',
                            key: 'processType_dictText',
                            align: 'center',
                        },
                        {
                            title: '流程名称',
                            dataIndex: 'processName',
                            key: 'processName',
                            align: 'center',
                            scopedSlots: { customRender: 'processName' },
                        },
                    ],
                    align: 'center',
                    width: 200
                },
                {
                    title: '流程使用情况',
                    children: [
                        {
                            title: '截止当前发起流程数',
                            dataIndex: 'processCount',
                            key: 'processCount',
                            align: 'center',
                        },
                        {
                            title: '环比',
                            dataIndex: 'processRate',
                            key: 'processRate',
                            align: 'center',
                            customRender: (text, row, index) => {
                                return <span>{text}%</span>
                            }
                        },
                    ],
                    align: 'center',
                    width: 200
                },
                {
                    title: '流程运行情况',
                    children: [
                        {
                            title: '截止当前结束流程数',
                            dataIndex: 'finishedProcessCount',
                            key: 'finishedProcessCount',
                            align: 'center',
                        },
                        {
                            title: '平均运行时长',
                            dataIndex: 'finishedProcessTime',
                            key: 'finishedProcessTime',
                            align: 'center',
                            scopedSlots: { customRender: 'finishedProcessTime' },
                        },
                    ],
                    align: 'center',
                    width: 200
                },
                {
                    title: '流程超期结束情况',
                    children: [
                        {
                            title: '截止当前超期结束流程数',
                            dataIndex: 'overCount',
                            key: 'overCount',
                            align: 'center',
                        },
                        {
                            title: '平均运行时长',
                            dataIndex: 'overTime',
                            key: 'overTime',
                            align: 'center',
                            scopedSlots: { customRender: 'overTime' },
                        },
                    ],
                    align: 'center',
                    width: 200
                },
            ],
            tableData: [],
            loading: false,
        }
    },
    watch: {
        visible(newval, oldval) {
            if (newval) {
                this.initData()
            } else {
                this.tableData = []
            }
        },
    },
    methods: {
        //导出
        handleExportXls(val){
            const fileName = '运营流程'
            let param = {};
            let startDate = `${moment(this.time[0]).format('YYYY-MM')}-01 00:00:00`
            let endDate = `${moment(this.time[1]).endOf('month').format('YYYY-MM-DD')} 23:59:59`
            let sortType = this.modalType.sortType
            param.startDate = startDate
            param.endDate = endDate
            param.sortType = sortType
            console.log('导出参数', param)
            downFile('/api/erpmng/sys/bpm/report/board/exportXls', param).then(data => {
                if (!data) {
                this.$message.warning('文件下载失败')
                return
                }
                if (typeof window.navigator.msSaveBlob !== 'undefined') {
                window.navigator.msSaveBlob(
                    new Blob([data], {
                    type: 'application/vnd.ms-excel'
                    }),
                    fileName + '.xls'
                )
                } else {
                let url = window.URL.createObjectURL(
                    new Blob([data], {
                    type: 'application/vnd.ms-excel'
                    })
                )
                let link = document.createElement('a')
                link.style.display = 'none'
                link.href = url
                link.setAttribute('download', fileName + '.xls')
                document.body.appendChild(link)
                link.click()
                document.body.removeChild(link) // 下载完成移除元素
                window.URL.revokeObjectURL(url) // 释放掉blob对象
                }
            })
            },
        // 初始化数据
        initData() {
            this.loading = true
            let startDate = `${moment(this.time[0]).format('YYYY-MM')}-01 00:00:00`
            let endDate = `${moment(this.time[1]).endOf('month').format('YYYY-MM-DD')} 23:59:59`
            getAction('/api/erpmng/sys/bpm/report/board/overviewChart', { sortType: this.modalType.sortType, startDate, endDate }).then(res => {
                this.loading = false
                this.tableData = res.result ? res.result : []
            }).catch(() => {
                this.loading = false
            })
        },
        handleOk() {
            this.$emit('update:visible', false)
        },
        closeModal() {
            this.$emit('update:visible', false)
        },
        // 查看历史任务
        processTask(text) {
            let obj = {
                ...text,
                ...this.modalType,
                startDate: `${moment(this.time[0]).format('YYYY-MM')}-01 00:00:00`,
                endDate: `${moment(this.time[1]).endOf('month').format('YYYY-MM-DD')} 23:59:59`
            }
            this.$emit('processTask', obj)
        },
    },
}
</script>